<!--
 * @Author: charchen
 * @Date: 2021-05-25 16:05:26
 * @LastEditTime: 2021-05-20 18:40:00
 * @LastEditors: charchen
 * @Description: 【编辑提货人】页面：包含修改姓名，手机号码，设为默认联系人，删除按钮
-->
<template>
  <div class="edit_pickInfo">
    <div class="baseInfo">
      <van-field v-model="pickerUserInfo.picker" :label="t('pickupSelect_name')" maxlength="30" :placeholder="t('pickupSelect_fill_name')" />
      <!-- 输入手机号，调起手机号键盘 -->
      <div class="phone-cont" :class="[{ 'error-phone': showPhoneError }]">
        <div class="phone-del">
            <div class="phone-left">
            <span class="phone-title">{{ t('pickupSelect_phone_number') }}</span>
          </div>
          <div class="phone-detail">
            <!-- 区号 -->
            <area-code :currentArea="currentArea" @changeArea="changeArea"></area-code>
            <van-field v-model="pickerUserInfo.picker_contact" class="phone-text" type="tel" :placeholder="t('pickupSelect_fill_phone_number')"
              :formatter="limitInput" @blur="phoneBlur" />
          </div>
          </div>
      </div>
    </div>
    <div class="setDefault">
      <van-cell :title="t('pickupSelect_set_default_contact')">
        <template #right-icon>
          <van-switch v-model="userIsDefault" />
        </template>
      </van-cell>
    </div>
    <div class="footerbar">
      <div class="delete-btn" @click="delPickerInfo" v-if="updatePickerId">{{ t('delete') }}</div>
      <div class="save-btn" @click="editPickerInfo">{{ t('save') }}</div>
    </div>
  </div>
</template>
<script>
import { request } from "@xiaoe/js-tools/lib/request";
import { Toast, Switch, Field, Cell } from "vant";
import areaCode from "../areaCode";
import locale from "../../../../mixins/locale";

export default {
  components: {
    areaCode,
    [Switch.name]: Switch,
    [Field.name]: Field,
    [Cell.name]: Cell,
  },
  mixins: [locale],
  props: {
    pickerUserInfo: {
      type: Object,
      default: () => ({})
    },
    updatePickerId: {
      type: [String, Number],
      default: ''
    }
  },
  data() {
    return {
      userIsDefault: false,
      currentArea: {
        nation_name: "中国",
        nation_code: "86",
      },
      showPhoneError: false
    }
  },
  mounted() {
    setTimeout(() => {
      this.phoneBlur()
    }, 0)
  },
  watch: {
    pickerUserInfo: {
      handler(info) {
        if (info) {
          this.userIsDefault = Boolean(info.is_default);
          info?.currentArea?.nation_code && (this.currentArea = info.currentArea);
        }
      },
      immediate: true
    },
    currentArea() {
      this.phoneBlur();
    }
  },
  methods: {
    // 选择区号弹框显隐
    changeArea(item) {
      this.currentArea = item;
    },
    // 手机号失焦校验
    phoneBlur() {
      let picker_contact = this.pickerUserInfo?.picker_contact || '';
      const patt = /^[1][3-9][\d]{9}/.test(this.pickerUserInfo.picker_contact);
      if (this.currentArea.nation_code === '86' && (picker_contact.length != 11 || !patt)) {
        this.showPhoneError = true;
        Toast(this.t('address_phone_num'))
      } else {
        this.showPhoneError = false;
      }
    },
    //电话输入优化
    limitInput(value) {
      return value.replace(/[^\d]/g, "");
    },
    //所有输入框的校验
    checkValue() {
      let flag = true;
      let picker_contact = this.pickerUserInfo?.picker_contact || '';
      // 校验收货人信息
      if (!this.pickerUserInfo?.picker) {
        flag = this.t('fill_consignee_name');
        return flag;
      }
      if (picker_contact) {
        if (this.currentArea.nation_code == '86') {
          const patt = /^[1][3-9][\d]{9}/.test(picker_contact);
          if (picker_contact.length === 11 && patt) {
            return flag;
          } else {
            flag = this.t('address_phone_num');
            return flag;
          }
        }
      } else {
        flag = this.t('fill_phone_number');
        return flag;
      }
      return true;
    },
    //编辑提货人信息
    editPickerInfo() {
      let flag = this.checkValue();
      //判断flag的布尔值
      if (flag !== true) {
        Toast(flag);
        return;
      } else {
        let params = {
          picker: this.pickerUserInfo.picker,
          picker_contact: this.pickerUserInfo.picker_contact,
          currentArea: this.currentArea,
          is_default: (this.userIsDefault === true ? 1 : 0),
        };
        let url = '';
        if (this.updatePickerId) {
          params['picker_id'] = this.pickerUserInfo.id;
          url = "xe.ecommerce.logistics_go.update_picker/1.0.0";
        } else {
          params['app_id'] = window.APPID;
          params['user_id'] = window.USERID;
          url = "xe.ecommerce.logistics_go.add_picker/1.0.0";
        }
        request({
          url,
          params,
        }).then((res) => {
          if (res.code === 0) {
            this.updatePickerId ? this.$toast(this.t('modified_successfully')) : this.$toast(this.t('save_suc'));
            this.$emit('getPicker');
            this.$emit('pickerSelect', res.data);
          }
        });
      }
    },
    //删除提货人信息
    delPickerInfo() {
      let params = {
        picker_id: this.pickerUserInfo.id
      }
      request({
        url: "xe.ecommerce.logistics_go.del_picker/1.0.0",
        params,
      }).then((res) => {
        if (res.code === 0) {
          this.$toast(this.t('deleted_successfully'));
          this.$emit('getPicker');
          this.$emit('onClick');
        }
      });
    }
  }
}
</script>

<style lang="scss" scoped>
@import "../../assets/styles/global.scss";
@import "../../assets/styles/common.scss";
.edit_pickInfo {
  .van-cell {
    padding: 0.24rem 0.32rem;
  }

  .van-switch {
    font-size: 25px;
  }

  .van-switch--on {
    background-color: #105cfb;
  }

  .baseInfo {
    margin-bottom: .18rem;
  }

  .phone-cont {
    background: #fff;
    padding: 0 0.32rem;

    .phone-del {
      display: flex;
      align-items: center;
      position: relative;
    }

    .phone-del::after {
      position: absolute;
      box-sizing: border-box;
      content: ' ';
      pointer-events: none;
      right: 1px;
      bottom: 0;
      left: 1px;
      border-bottom: 1px solid #ebedf0;
      transform: scaleY(.5);
    }

    .phone-left {
      display: flex;

      .phone-title {
        display: block;
        width: 1.44rem;
        font-size: 0.28rem;
        color: #666666;
      }
    }

    .phone-detail {
      display: flex;
      align-items: center;
      position: relative;
      flex: 1;

      .phone-text {
        padding-left: 0.24rem !important;
      }

      .error-phone {
        text-align: right;
        color: red;
        font-size: 0.24rem;
        position: absolute;
        left: 1rem;
        bottom: 0;
      }
    }
  }

  .error-phone {
    border-bottom: 1px solid #FF4747;
  }

  .footerbar {
    border-top: 0.02rem solid #eee;
    position: fixed;
    bottom: 0;
    left: 0;
    background: #fff;
    width: calc(100% - 0.56rem);
    padding: 0.16rem 0.28rem;
    display: flex;
    align-items: center;
    justify-content: center;

    .save-btn {
      flex: 1;
      padding: 0.2rem 0;
      border-radius: 0.4rem;
      text-align: center;
      color: #fff;
      background: #105cfb;
    }

    .delete-btn {
      text-align: center;
      width: 2.12rem;
      padding: 0.16rem 0;
      margin-right: 0.24rem;
      background: white;
      border-radius: 0.4rem;
      border: 0.02rem solid #b7b7b7;
    }
  }
}
</style>
<style lang="scss">
.edit_pickInfo {
  .van-field__label {
    width: 4em;
    color: #666666;
  }

  .van-cell__title {
    color: #666666;
  }
}
</style>
